<template>
  <div class="margin: 0px auto !imporant; px-3" style="overflow-x: hidden !important;">
    <!-- 消息提示框 -->
    <v-dialog persistent v-model="messageDialog" width="330">
      <v-card>
        <v-card-title style="background: #71AF65;">
          <v-layout align-center justify-center row fill-height>
            <span style="font-size: 16px; font-weight: bold; color: #ffffff;">
              {{
              messageTitle
              }}
            </span>
          </v-layout>
        </v-card-title>
        <v-card-text>
          <v-layout align-center justify-center row fill-height>
            <span style="font-size: 14px; color:#999999;">
              {{
              messageContent
              }}
            </span>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-layout
            align-center
            justify-center
            row
            fill-height
            pt-2
            style="border-top: 1px solid #dddddd;"
          >
            <v-btn class="dialogBtn" flat @click="closeMessageDialog()">关 闭</v-btn>
            <!-- <v-btn v-if="buttonState" class="dialogBtn" flat @click="deleteAlarmAccount()">确 定</v-btn> -->
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- 加载框 -->
    <v-dialog v-model="historyLoding" persistent width="300">
      <v-card color="#5CB15C" style="font-color:#fff">
        <v-card-title>
          <span style="position:absolute;right:0;top:0">
            <v-btn text icon dark @click="historyLoding = false">
              <v-icon>X</v-icon>
            </v-btn>
          </span>
        </v-card-title>
        <v-card-text class="white--text">
          加载中....................
          <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
        </v-card-text>
      </v-card>
    </v-dialog>

    <v-layout wrap row py-5 px-5 style="background: #F8FAFD;">
      <v-flex xs12 pl-3>
        <v-btn text icon color="#E9E9E9" :to="{path: '/RealTimeDataReporting'}" replace>
          <font class="iconfont icon-fanhui" style="font-size: 57px"></font>
        </v-btn>
      </v-flex>

      <v-flex xs12 pl-3 mt-5>
        <v-layout align-center justify-start row fill-height>
          <div
            style="border-radius: 50%; background: #54BEB6; width: 56px; height: 56px; text-align: center; line-height: 56px;"
          >
            <font class="iconfont icon-zhinengpanzhu" style="color: #ffffff; font-size: 56px;"></font>
          </div>
          <div class="ml-5">
            <span style="font-size: 20px; color: #333333; font-weight: bold;">猪耳标历史数据</span>
          </div>
        </v-layout>
      </v-flex>

      <v-flex xs12 mt-4>
        <v-layout wrap row>
          <v-flex xs12 pl-2>
            <v-layout wrap row>
              <v-flex xs12 sm12 md3 lg2 px-5>
                <v-select
                  no-data-text="当前没有区域"
                  :items="zoneInfoArr"
                  item-text="tagName"
                  item-value="tagMac"
                  label="查询区域"
                  v-model="zoneID"
                  color="#71AF65"
                ></v-select>
              </v-flex>
            </v-layout>
          </v-flex>

          <v-flex xs12 pl-2>
            <v-layout wrap row>
              <!-- 起始时间 结束时间 -->
              <v-flex xs12 sm6 md6 lg5 px-5>
                <v-layout wrap row>
                  <v-flex xs12 sm5 md5 mx-3 v-for="(item, index) in timeObjArray" :key="index">
                    <v-layout wrap row>
                      <v-flex xs6 px-5>
                        <v-dialog v-model="item.dateModel" persistent width="320px">
                          <template v-slot:activator="{ on }">
                            <v-layout wrap row>
                              <v-flex xs12 class="flexInputStyle">
                                <v-text-field
                                  v-model="item.dateValue"
                                  :label="item.dateName"
                                  readonly
                                  v-on="on"
                                ></v-text-field>
                              </v-flex>
                            </v-layout>
                          </template>
                          <v-date-picker
                            v-if="item.dateModel"
                            :first-day-of-week="0"
                            locale="zh-cn"
                            color="#71af65"
                            scrollable
                            full-width
                            v-model="item.dateValue"
                          >
                            <v-spacer></v-spacer>
                            <v-btn color="#71af65" dark @click="item.dateModel = false">关闭</v-btn>
                            <v-btn
                              color="#71af65"
                              dark
                              @click="
                                saveTime(index, 'dateModel', item.dateName)
                              "
                            >确定</v-btn>
                          </v-date-picker>
                        </v-dialog>
                      </v-flex>
                      <v-flex xs6 px-5>
                        <v-dialog v-model="item.timeModel" persistent width="320px">
                          <template v-slot:activator="{ on }">
                            <v-layout wrap row>
                              <v-flex xs12 class="flexInputStyle">
                                <v-text-field
                                  v-model="item.timeValue"
                                  :label="item.timeName"
                                  readonly
                                  v-on="on"
                                ></v-text-field>
                              </v-flex>
                            </v-layout>
                          </template>
                          <v-time-picker
                            v-if="item.timeModel"
                            v-model="item.timeValue"
                            format="24hr"
                            color="#71af65"
                            full-width
                          >
                            <v-spacer></v-spacer>
                            <v-btn color="#71af65" dark @click="item.timeModel = false">关闭</v-btn>
                            <v-btn
                              color="#71af65"
                              dark
                              @click="
                                saveTime(index, 'timeModel', item.timeName)
                              "
                            >确定</v-btn>
                          </v-time-picker>
                        </v-dialog>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 v-show="timeErrorState" style="margin-top: -28px;">
                    <v-layout align-center justify-center row fill-height>
                      <span style="font-size: 12px; color: red;">
                        {{
                        timeErrorMessage
                        }}
                      </span>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>

              <!-- 查询按钮和固定时间 一天 一周 一月   折线图或图表的按钮 -->
              <v-flex xs12 sm6 md6 lg7>
                <v-layout wrap row pt-3>
                  <v-flex xs5 sm2 md2 lg1 :class="{ 'pl-3': this.pageState === false }">
                    <v-layout align-center justify-center row fill-height>
                      <v-btn
                        small
                        color="#71af65"
                        :class="{ 'ml-5': this.pageState === false }"
                        dark
                        @click="selectAnimalHistory()"
                      >查询</v-btn>
                    </v-layout>
                  </v-flex>
                  <v-flex xs7 sm5 md5 lg3 :class="{'ml-5': this.pageState === true}">
                    <v-layout align-center justify-center row fill-height>
                      <v-btn
                        small
                        outlined
                        :class="{'btn-border-color-t': this.fixedTimeButton === '1', 'btn-border-color-f': this.fixedTimeButton !== '1'}"
                        @click="fixedTime(1)"
                      >
                        <span style="color: #666666">今日</span>
                      </v-btn>
                      <v-btn
                        small
                        outlined
                        :class="{'btn-border-color-t': this.fixedTimeButton === '7', 'btn-border-color-f': this.fixedTimeButton !== '7'}"
                        dark
                        @click="fixedTime(7)"
                      >
                        <span style="color: #666666">本周</span>
                      </v-btn>
                      <v-btn
                        small
                        outlined
                        :class="{'btn-border-color-t': this.fixedTimeButton === '30', 'btn-border-color-f': this.fixedTimeButton !== '30'}"
                        dark
                        @click="fixedTime(30)"
                      >
                        <span style="color: #666666">本月</span>
                      </v-btn>
                    </v-layout>
                  </v-flex>

                  <!-- 转换 折线图或图表的按钮 -->
                  <v-flex
                    xs12
                    sm4
                    md4
                    lg3
                    :class="{'mt-5': this.pageState === false, 'px-5': this.pageState === false, 'pr-5': this.pageState === false}"
                  >
                    <v-layout
                      align-center
                      justify-space-around
                      row
                      fill-height
                      :class="{ 'px-1': this.pageState === false, 'pr-3': this.pageState === false }"
                    >
                      <v-btn
                        small
                        outlined
                        :class="{ 'btn-border-color-t': this.actionPage === 0,  'btn-border-color-f': this.actionPage === 1}"
                        @click="changePage(0)"
                      >
                        <span style="color: #666666">曲线图</span>
                      </v-btn>
                      <v-btn
                        small
                        outlined
                        ma-2
                        :class="{ 'btn-border-color-t': this.actionPage === 1,  'btn-border-color-f': this.actionPage === 0}"
                        @click="changePage(1)"
                      >
                        <span style="color: #666666">&nbsp;表&nbsp;格&nbsp;</span>
                      </v-btn>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-flex>

      <!-- 显示 折线图 或图表 -->
      <v-flex xs12 pr-8 v-show="actionPage === 0">
        <ChartPage :history="chartHistoryAELDateArr"></ChartPage>
      </v-flex>
      <v-flex xs12 v-show="actionPage === 1">
        <TablePage
          :history="historyAELDateArr"
          :time="timeObjArray"
          :zone="zoneItem"
          :equipment="pageState"
        ></TablePage>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import ChartPage from "./ChartPage";
import TablePage from "./TablePage";
import moment from "moment";
export default {
  name: "MainPage",

  components: {
    ChartPage,
    TablePage
  },

  data: () => ({
    name: window.navigator.userAgent,
    requestNum: 0,
    chartHistoryAELDateArr: [],
    historyAELDateArr: [], // 记录当前所选时间段所有查询到的 耳标记录日志
    userQryId: "", // 当前用户登录系统的手机号和时间的结合
    limit: 500, // 要取的条数
    offset: 0, // 起始条目
    qryIDArr: [], // 存储每次查询的qryID
    historyArrObj: {
      addNum: null // 用于记录总共要接收多少次数据
    }, // 用于存储每次返回的历史数据数组 属性为每次的qryId
    allHistoryDataArr: [],
    zoneInfoArr: [], // 存储当前所有区域
    zoneItem: "", // 当前选中的区域
    zoneID: "", // 存储当前区域的zone_id
    timeObjArray: [], // 存储 起始日期 起始时间 结束时间 结束时间
    timeErrorState: false, // 起始日期 起始时间 结束时间 结束时间 状态校验
    timeErrorMessage: "", // 校验信息
    messageDialog: false, // 消息提示框状态
    messageTitle: "", // 消息提示框标题
    messageContent: "", // 消息提示框内容
    actionPage: 1, // 用于记录要显示的页面 0 为折线图 1 为表格
    historyLoding: false,
    lastData: {}, // 用于存储最后一条数据
    pageState: true,
    fixedTimeButton: "1"
  }),

  created() {
    // this.userQryId =
    //   JSON.parse(this.$store.state.UserAlldata).mobile +
    //   new Date().getTime() +
    //   Math.random();
    // let date = new Date();
    this.timeObjArray.push({
      dateName: "起始日期",
      timeName: "起始时间",
      dateModel: false,
      // dateValue: new Date(date.getTime() - 24 * 60 * 60 * 1000).Format(
      //   "yyyy-MM-dd"
      // ),
      dateValue: moment(Date.now() - 24 * 60 * 60 * 1000).format("YYYY-MM-DD"),
      timeModel: false,
      // timeValue: new Date(date.getTime() - 24 * 60 * 60 * 1000).Format("hh:mm")
      timeValue: moment(Date.now() - 24 * 60 * 60 * 1000).format("HH:mm")
    });
    this.timeObjArray.push({
      dateName: "结束日期",
      timeName: "结束时间",
      dateModel: false,
      dateValue: moment().format("YYYY-MM-DD"),
      timeModel: false,
      timeValue: moment().format("HH:mm")
    });

    if (
      this.name.toLowerCase().indexOf("android") !== -1 ||
      this.name.toLowerCase().indexOf("ios") !== -1 ||
      this.name.toLowerCase().indexOf("mac") !== -1
    ) {
      this.pageState = false;
    } else {
      this.pageState = true;
    }

    if (this.mqttConnStat === 1) {
      this.selectAnimalVersion();
    } else if (this.mqttConnStat === 2) {
      //表明正在连接，显示loading
    } else if (this.mqttConnStat === 0) {
      //表明没有连接，进行连接
      this.$store.dispatch("connectMqttClient");
    } else {
      //不可能的状态
    }
    this.selectAnimalVersion();
  },

  computed: {
    mqttConnStat() {
      return this.$store.getters.mqttConnStat;
    },
    mqttClient() {
      return this.$store.state.mqttClient;
    },
    mqttMessage() {
      return this.$store.state.mqttMessage;
    },
    mqttBaseTopic() {
      return this.$store.state.mqttBaseTopic;
    },
    // 计算起始 日期+时间 的毫秒数
    startTime() {
      let dateString =
        this.timeObjArray[0].dateValue + " " + this.timeObjArray[0].timeValue;
      return new Date(dateString).getTime();
    },
    // 计算结束 日期+时间 的毫秒数
    endTime() {
      let dateString =
        this.timeObjArray[1].dateValue + " " + this.timeObjArray[1].timeValue;
      return new Date(dateString).getTime();
    }
  },

  watch: {
    mqttConnStat(newVal, oldVal) {
      if (newVal === 1 && oldVal === 2) {
        this.selectAnimalVersion();
      }
    },

    /*     mqttMessage: {
      handler: function() {
        let _this = this;
        let data = JSON.parse(this.mqttMessage);
        if (data.confTyp === "TAG" && data.method === "TAG_INFO") {
          this.zoneInfoArr = [...data.para];
          if (this.zoneInfoArr.length > 0) {
            // this.zoneItem = this.zoneInfoArr[0].tagName;
            // this.zoneID = this.zoneInfoArr[0].tagMac;
            this.zoneInfoArr.forEach(item => {
              if (item.tagMac === _this.$route.query.earTag.tagMac) {
                _this.zoneItem = item.tagName;
                _this.zoneID = item.tagMac;
              }
            });
            // console.log("=====>初始化: ", this.$route.query.earTag);
            // this.selectAnimalHistory(); //earTag;
          } else {
            this.messageDialog = true; // 消息提示框状态
            this.messageTitle = "查询区域"; // 消息提示框标题
            this.messageContent = "当前服务器下没有查询到区域"; // 消息提示框内容
          }
        }

        if (
          data.tagMac === this.zoneID &&
          data.qryId === this.userQryId &&
          data.limit > 1
        ) {
          let _this = this;
          // 但没查到数据时,给出提示
          if (data.totalItems === 0) {
            this.chartHistoryAELDateArr = [];
            this.historyAELDateArr = [];
            this.historyLoding = false;
            return;
          }
          let cycleNum = data.data.t.length;
          if (this.qryIDArr.length === 0) {
            this.historyLoding = false;
            return;
          }
          if (this.historyArrObj.addNum === null && this.qryIDArr.length > 0) {
            this.historyData = [];
            this.allHistoryDataArr = [];
            this.requestNum = Math.ceil(data.totalItems / this.limit);
            this.historyArrObj.addNum = Math.ceil(data.totalItems / this.limit);
            console.log("-----all req num", this.requestNum, data);
            for (let i = 1; i < this.requestNum; i++) {
              this.offset = this.limit * i;
              this.selectAnimalHistory();
            }
          }
          if (
            this.qryIDArr.length > 0 &&
            this.historyArrObj[data.qryId].length === 0
          ) {
            let newData = [];
            console.log("zzzzzzzzzzzz", data);
            for (let i = 0; i < cycleNum; i++) {
              newData.push({
                envTemp: data.data.envTemp[i],
                stepCount: data.data.stepCount[i],
                t: data.data.t[i],
                targetTemp: data.data.targetTemp[i],
                vol: data.data.vol[i]
              });
            }
            this.historyArrObj[data.qryId] = newData;
            this.historyArrObj.addNum--;
          }
          // console.log(
          //   "------ start what ------",
          //   this.historyArrObj.addNum,
          //   this.qryIDArr.length,
          //   this.historyArrObj
          // );
          if (this.historyArrObj.addNum === 0 && this.qryIDArr.length > 0) {
            this.chartHistoryAELDateArr = [];
            this.historyAELDateArr = [];
            let modulo;
            let equipment;
            let chartData = [];
            // console.log("------ start ------");
            for (let j = 0; j < this.qryIDArr.length; j++) {
              this.historyAELDateArr = this.historyAELDateArr.concat(
                _this.historyArrObj[_this.qryIDArr[j]]
              );
            }

            // console.log("====>end  :", data, this.historyAELDateArr);

            this.lastData = this.historyAELDateArr[
              this.historyAELDateArr.lenght - 1
            ];

            if (
              this.name.toLowerCase().indexOf("android") !== -1 ||
              this.name.toLowerCase().indexOf("ios") !== -1 ||
              this.name.toLowerCase().indexOf("mac") !== -1
            ) {
              this.pageState = false;
              equipment = 10;
            } else {
              this.pageState = true;
              equipment = 1;
            }

            let highest = Number(
              this.historyAELDateArr.length.toString().slice(0, 1)
            ); // length 的最高位

            if (this.historyAELDateArr.length <= 1000) {
              modulo = 1 * equipment;
            } else if (
              this.historyAELDateArr.length > 1000 &&
              this.historyAELDateArr.length < 10000
            ) {
              modulo = highest * equipment;
            } else if (
              this.historyAELDateArr.length > 10000 &&
              this.historyAELDateArr.length < 100000
            ) {
              modulo = highest * 10 * equipment;
            } else if (
              this.historyAELDateArr.length > 100000 &&
              this.historyAELDateArr.length < 1000000
            ) {
              modulo = highest * 100 * equipment;
            } else {
              modulo = highest * 10000 * equipment;
            }

            for (
              let index = 0;
              index < this.historyAELDateArr.length;
              index++
            ) {
              if (
                index === 0 ||
                index % modulo === 0 ||
                index === this.historyAELDateArr.length - 1
              ) {
                chartData.push(this.historyAELDateArr[index]);
              }
            }

            this.chartHistoryAELDateArr = chartData;

            this.requestNum = 0;
            this.historyArrObj = {
              addNum: null
            };
            this.allHistoryDataArr = [];
            this.qryIDArr = [];
            this.historyLoding = false;
          }
          this.historyLoding = false;
        }
        if (
          data.tagMac === this.zoneID &&
          data.qryId === this.userQryId &&
          data.limit < 1
        ) {
          this.requestNum = 0;
          this.historyArrObj = {
            addNum: null
          };
          this.allHistoryDataArr = [];
          this.qryIDArr = [];
          this.historyLoding = false;
        }
      },
      deep: true
    }, */

    mqttMessage() {
      let _this = this;
      let data = JSON.parse(this.mqttMessage);
      if (data.confTyp === "TAG" && data.method === "TAG_INFO") {
        this.zoneInfoArr = [...data.para];
        if (this.zoneInfoArr.length > 0) {
          // this.zoneItem = this.zoneInfoArr[0].tagName;
          // this.zoneID = this.zoneInfoArr[0].tagMac;
          this.zoneInfoArr.forEach(item => {
            if (item.tagMac === _this.$route.query.earTag.tagMac) {
              _this.zoneItem = item.tagName;
              _this.zoneID = item.tagMac;
            }
          });
          // console.log("=====>初始化: ", this.$route.query.earTag);
          // this.selectAnimalHistory(); //earTag;
        } else {
          this.messageDialog = true; // 消息提示框状态
          this.messageTitle = "查询区域"; // 消息提示框标题
          this.messageContent = "当前服务器下没有查询到区域"; // 消息提示框内容
        }
      }

      if (
        data.tagMac === this.zoneID &&
        data.limit > 1 &&
        this.mqttBaseTopic ===
          "b5e1726951d82efb3ab70a18e0de4d6b9a760aaed0c70a57895a758aa50279cf/AnimalTag/historyData"
      ) {
        let _this = this;
        // 但没查到数据时,给出提示
        if (data.totalItems === 0) {
          this.chartHistoryAELDateArr = [];
          this.historyAELDateArr = [];
          this.historyLoding = false;
          return;
        }
        let cycleNum = data.data.t.length;
        if (this.qryIDArr.length === 0) {
          this.historyLoding = false;
          return;
        }
        console.log("waht: ");
        if (this.historyArrObj.addNum === null && this.qryIDArr.length > 0) {
          this.historyData = [];
          this.allHistoryDataArr = [];
          this.requestNum = Math.ceil(data.totalItems / this.limit);
          this.historyArrObj.addNum = Math.ceil(data.totalItems / this.limit);
          console.log("-----all req num", this.requestNum, data);
          for (let i = 1; i < this.requestNum; i++) {
            this.offset = this.limit * i;
            this.selectAnimalHistory();
          }
        }
        if (
          this.qryIDArr.length > 0 &&
          this.historyArrObj[data.qryId].length === 0
        ) {
          let newData = [];
          console.log("zzzzzzzzzzzz", data);
          for (let i = 0; i < cycleNum; i++) {
            newData.push({
              envTemp: data.data.envTemp[i],
              stepCount: data.data.stepCount[i],
              t: data.data.t[i],
              targetTemp: data.data.targetTemp[i],
              vol: data.data.vol[i]
            });
          }
          this.historyArrObj[data.qryId] = newData;
          this.historyArrObj.addNum--;
        }
        // console.log(
        //   "------ start what ------",
        //   this.historyArrObj.addNum,
        //   this.qryIDArr.length,
        //   this.historyArrObj
        // );
        if (this.historyArrObj.addNum === 0 && this.qryIDArr.length > 0) {
          this.chartHistoryAELDateArr = [];
          this.historyAELDateArr = [];
          let modulo;
          let equipment;
          let chartData = [];
          // console.log("------ start ------");
          for (let j = 0; j < this.qryIDArr.length; j++) {
            this.historyAELDateArr = this.historyAELDateArr.concat(
              _this.historyArrObj[_this.qryIDArr[j]]
            );
          }

          // console.log("====>end  :", data, this.historyAELDateArr);

          this.lastData = this.historyAELDateArr[
            this.historyAELDateArr.lenght - 1
          ];

          if (
            this.name.toLowerCase().indexOf("android") !== -1 ||
            this.name.toLowerCase().indexOf("ios") !== -1 ||
            this.name.toLowerCase().indexOf("mac") !== -1
          ) {
            this.pageState = false;
            equipment = 10;
          } else {
            this.pageState = true;
            equipment = 1;
          }

          let highest = Number(
            this.historyAELDateArr.length.toString().slice(0, 1)
          ); // length 的最高位

          if (this.historyAELDateArr.length <= 1000) {
            modulo = 1 * equipment;
          } else if (
            this.historyAELDateArr.length > 1000 &&
            this.historyAELDateArr.length < 10000
          ) {
            modulo = highest * equipment;
          } else if (
            this.historyAELDateArr.length > 10000 &&
            this.historyAELDateArr.length < 100000
          ) {
            modulo = highest * 10 * equipment;
          } else if (
            this.historyAELDateArr.length > 100000 &&
            this.historyAELDateArr.length < 1000000
          ) {
            modulo = highest * 100 * equipment;
          } else {
            modulo = highest * 10000 * equipment;
          }

          for (let index = 0; index < this.historyAELDateArr.length; index++) {
            if (
              index === 0 ||
              index % modulo === 0 ||
              index === this.historyAELDateArr.length - 1
            ) {
              chartData.push(this.historyAELDateArr[index]);
            }
          }

          this.chartHistoryAELDateArr = chartData;

          this.requestNum = 0;
          this.historyArrObj = {
            addNum: null
          };
          this.allHistoryDataArr = [];
          this.qryIDArr = [];
          this.historyLoding = false;
        }
        this.historyLoding = false;
      }
      if (
        data.tagMac === this.zoneID &&
        data.qryId === this.userQryId &&
        data.limit < 1
      ) {
        this.requestNum = 0;
        this.historyArrObj = {
          addNum: null
        };
        this.allHistoryDataArr = [];
        this.qryIDArr = [];
        this.historyLoding = false;
      }
    },

    zoneID(val) {
      let _this = this;

      this.zoneInfoArr.forEach(item => {
        if (item.tagMac === val) {
          return (this.zoneItem = item.tagName);
        }
      });
      this.selectAnimalHistory();
      this.actionPage = 1;
      // this.historyLoding = true;
    }
  },

  methods: {
    // 选择日期确定按钮 进行日期校验,起始 日期+时间 < 结束日期+时间
    saveTime(index, model, name) {
      if (this.startTime >= this.endTime) {
        this.timeErrorState = true; // 起始日期 起始时间 结束时间 结束时间 状态校验
        this.timeErrorMessage = `${name}填写错误, 起始时间段必须小于结束时间段`; // 校验信息
      } else {
        this.timeErrorState = false;
        this.timeErrorMessage = "";
      }
      if (index !== undefined) {
        this.timeObjArray[index][model] = false;
      }
    },

    // 点击固定时间按钮(今日 本周 本月)进行查询
    fixedTime(num) {
      this.saveTime();
      this.actionPage = 0;
      let date = new Date();
      this.timeObjArray[0].dateValue = moment(
        date.getTime() - num * 24 * 60 * 60 * 1000
      ).format("YYYY-MM-DD");
      this.timeObjArray[0].timeValue = moment(
        date.getTime() - num * 24 * 60 * 60 * 1000
      ).format("HH:mm");
      this.timeObjArray[1].dateValue = moment().format("YYYY-MM-DD");
      this.timeObjArray[1].timeValue = moment().format("HH:mm");
      this.selectAnimalHistory();
    },

    // 查询猪耳标版本号
    selectAnimalVersion() {
      let _this = this;
      let animalVersionData = JSON.stringify({
        confTyp: "TAG",
        method: "TAG_INFO",
        para: {
          tagMac: "ALL"
        }
      });
      this.$store.commit("PUBLISH_VERSION", animalVersionData);
    },

    // 查询猪耳标记录
    selectAnimalHistory() {
      let _this = this;
      this.userQryId =
        Date.now() + "_" + Math.random() + "_" + performance.now();
      this.qryIDArr.push(_this.userQryId);
      this.historyArrObj[this.qryIDArr[this.qryIDArr.length - 1]] = [];
      let timeInterval =
        (this.endTime - this.startTime) / (1000 * 24 * 60 * 60);
      if (timeInterval <= 1) {
        this.fixedTimeButton = "1";
      } else if (timeInterval > 1 && timeInterval <= 7) {
        this.fixedTimeButton = "7";
      } else if (timeInterval > 7 && timeInterval <= 30) {
        this.fixedTimeButton = "30";
      } else {
        this.fixedTimeButton = "31";
      }
      let animalData = JSON.stringify({
        tagMac: _this.zoneID,
        updt: _this.endTime,
        downdt: _this.startTime,
        limit: _this.limit, // 要取的条数
        offset: _this.offset, // 起始条目
        qryId: _this.userQryId
      });
      // if (this.zoneID !== null) {
      //   this.$store.commit("PUBLISHMSG", animalData);
      // }
      this.$store.commit("PUBLISHMSG", animalData);
      console.log("------------start", this.qryIDArr, animalData);
      this.historyLoding = true;
    },

    // 切换选择页面
    changePage(num) {
      window.scroll(100, 120);
      this.actionPage = num;
    },

    // 关闭消息提示框
    closeMessageDialog() {
      this.messageDialog = false;
    }
  }
};
</script>

<style>
.dialogBtn {
  background: #ffffff;
  font-size: 14px;
  color: #666666 !important;
  border: 1px solid #dddddd;
  border-radius: 5px;
  height: 26px;
}

.flexInputStyle {
  /* border: 1px solid red !important; */
  /* background: #ffffff; */
  border-radius: 3px;
  width: 80% !important;
}

.mainButton {
  border-color: #71af65;
  color: #71af65;
  font-size: 12px;
  border: 1px solid #71af65;
  width: 86px;
  /* height: 26px;
  line-height: 26px; */
  border-radius: 3px;
}

.mainButton:hover,
.pageButton {
  border-color: #71af65;
  color: #ffffff;
  font-size: 12px;
  border: 1px solid #71af65;
  width: 86px;
  /* height: 26px; */
  /* line-height: 26px; */
  border-radius: 3px;
  background: #71af65;
}

.timeButton {
  width: 86px;
  height: 26px;
  font-size: 12px;
  background: #f3f3f3 !important;
  color: #666666 !important;
  border-radius: 3px;
  border: 1px solid #999999 !important;
}
.timeButton:hover {
  background: #71af65 !important;
  color: #ffffff !important;
  border: 1px solid #71af65 !important;
}

.btn-border-color-t {
  color: #71af65 !important;
  border-color: #71af65 !important;
  border: 1px solid #71af65;
}

.btn-border-color-f {
  color: #e9e9e9 !important;
  border-color: #e9e9e9 !important;
  border: 1px solid #e9e9e9;
}
</style>
